.u-relative,
.u-rela {
	position: relative;
}

.u-absolute,
.u-abso {
	position: absolute;
}

// nvue不能用标签命名样式，不能放在微信组件中，否则微信开发工具会报警告，无法使用标签名当做选择器
/* #ifndef APP-NVUE */
image {
	display: inline-block;
}

// 在weex，也即nvue中，所有元素默认为border-box
view,
text {
	box-sizing: border-box;
}
/* #endif */

.u-font-xs {
	font-size: 22rpx;
}

.u-font-sm {
	font-size: 26rpx;
}

.u-font-md {
	font-size: 28rpx;
}

.u-font-lg {
	font-size: 30rpx;
}

.u-font-xl {
	font-size: 34rpx;
}

.u-flex {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
}

.u-flex-wrap {
	flex-wrap: wrap;
}

.u-flex-nowrap {
	flex-wrap: nowrap;
}

.u-col-center {
	align-items: center;
}

.u-col-top {
	align-items: flex-start;
}

.u-col-bottom {
	align-items: flex-end;
}

.u-row-center {
	justify-content: center;
}

.u-row-left {
	justify-content: flex-start;
}

.u-row-right {
	justify-content: flex-end;
}

.u-row-between {
	justify-content: space-between;
}

.u-row-around {
	justify-content: space-around;
}

.u-text-left {
	text-align: left;
}

.u-text-center {
	text-align: center;
}

.u-text-right {
	text-align: right;
}

.u-flex-col {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
}

// 定义flex等分
@for $i from 0 through 12 {
	.u-flex-#{$i} {
		flex: $i;
	}
}

// 定义字体(px)单位，小于20都为px单位字体
@for $i from 9 to 20 {
	.u-font-#{$i} {
		font-size: $i + px;
	}
}

// 定义字体(rpx)单位，大于或等于20的都为rpx单位字体
@for $i from 20 through 40 {
	.u-font-#{$i} {
		font-size: $i + rpx;
	}
}

// 定义内外边距，历遍1-80
@for $i from 0 through 80 {
	// 只要双数和能被5除尽的数
	@if $i % 2 == 0 or $i % 5 == 0 {
		// 得出：u-margin-30或者u-m-30
		.u-margin-#{$i}, .u-m-#{$i} {
			margin: $i + rpx!important;
		}
		
		// 得出：u-padding-30或者u-p-30
		.u-padding-#{$i}, .u-p-#{$i} {
			padding: $i + rpx!important;
		}
		
		@each $short, $long in l left, t top, r right, b bottom {
			// 缩写版，结果如： u-m-l-30
			// 定义外边距
			.u-m-#{$short}-#{$i} {
				margin-#{$long}: $i + rpx!important;
			}
			
			// 定义内边距
			.u-p-#{$short}-#{$i} {
				padding-#{$long}: $i + rpx!important;
			}
			
			// 完整版，结果如：u-margin-left-30
			// 定义外边距
			.u-margin-#{$long}-#{$i} {
				margin-#{$long}: $i + rpx!important;
			}
			
			// 定义内边距
			.u-padding-#{$long}-#{$i} {
				padding-#{$long}: $i + rpx!important;
			}
		}
	}
}

// 重置nvue的默认关于flex的样式
.u-reset-nvue {
	flex-direction: row;
	align-items: center;
}

//设置公共样式
.bg-none{background: none!important;}
.bg-color-ddd{background-color: #ddd!important;}
.bg-color-fff{background-color: #fff!important;}
.bg-color-000s5{background-color: rgba(0,0,0,.5)!important;}
.bg-color-000s7{background-color: rgba(0,0,0,.7)!important;}
.clear{clear:both;}
.clearfix{zoom:1;}
.clearfix:after{visibility:hidden;display:block;content:" ";clear:both;}
.hover{cursor: pointer;user-select: none;}
.float-left{float: left;}
.float-right{float: right;}

.none{display: none;}
.hide{visibility: hidden;}
.visib{visibility: visible;}
.box-sizing{box-sizing:border-box;}
.block{display: block;}
.inblock{display: inline-block;vertical-align: top;}
.inblock-middle{display: inline-block;vertical-align: middle;}
.text-left{text-align: left;}
.text-center{text-align: center;}
.text-right{text-align: right;}
.text-both{text-align: justify;}

.flex{display: flex;}
.inflex{display: inline-flex;}
.flex-row{flex-direction: row;} /* 行从左到右排序(默认) */
.flex-row-r{flex-direction: row-reverse;} /* 行从右到左排序 */
.flex-col{flex-direction: column;} /* 列从上到下排序 */
.flex-col-b{flex-direction: column-reverse;} /* 列从下到上排序 */
.flex-wrap{flex-wrap: wrap;}
.flex-left{justify-content:flex-start;}
.flex-center{justify-content:center;}
.flex-right{justify-content:flex-end;}
.flex-even{justify-content:space-evenly;}
.flex-around{justify-content:space-around;}
.flex-both{justify-content:space-between;}
.flex-top{align-items: flex-start;}
.flex-middle{align-items: center;}
.flex-bottom{align-items: flex-end;}

.flex-item-top{align-self: flex-start;}
.flex-item-middle{align-self: center;}
.flex-item-bottom{align-self: flex-end;}
.flex-item-grow-1{flex-grow: 1;} /* 存在剩余空间将放大 */
.flex-item-shrink-0{flex-shrink: 0;} /* 空间不足将不缩小 */
.flex-item-order-0{order: 0;} /* 单独排序(默认:0) */
.flex-item-order-1{order: 1;} /* 单独排序 */
.flex-item-order-2{order: 2;} /* 单独排序 */

.over-auto{overflow: auto;}
.over-auto-x{overflow-x: auto;}
.over-auto-y{overflow-y: auto;}
.over-hide{overflow: hidden;}
.over-hide-0{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.over-hide-1{overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.over-hide-2{overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.over-hide-3{overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}

.posit-relat{position: relative;}
.posit-absol{position: absolute;}
.posit-fixed{position: fixed;}
.z-index--1{z-index: -1;}
.z-index-1{z-index: 1;}
.z-index-10{z-index: 10;}
.z-index-100{z-index: 100;}
.z-index-1000{z-index: 1000;}
.left-0{left: 0;}
.right-0{right: 0;}
.top-0{top: 0;}
.bottom-0{bottom: 0;}
.border-parent{border: 1px solid;}
.border-0{border: 0!important;}
.border-radius-3{border-radius: 6rpx;}
.border-radius-5{border-radius: 10rpx;}
.border-radius-8{border-radius: 16rpx;}
.border-radius-10{border-radius: 20rpx;}
.border-radius-15{border-radius: 30rpx;}
.border-radius-16{border-radius: 32rpx;}
.border-radius-50{border-radius: 100rpx;}

.border-radius-t-15{border-top-left-radius: 30rpx;border-top-right-radius: 30rpx;}

.width-all{width: 100%;}
.height-all{height: 100%;}
.min-height-36{min-height: 72rpx;}

.line-none{line-height: normal;}
.line-1{line-height: 1;}
.line-1s2{line-height: 1.2;}
.line-1s4{line-height: 1.4;}
.line-1s6{line-height: 1.6;}
.line-2{line-height: 2;}


.font-none{font-weight: normal;}
.font-bold{font-weight: bold;}
.font-0{font-size: 0;}
.font-10{font-size: 20rpx;}
.font-11{font-size: 22rpx;}
.font-12{font-size: 24rpx;}
.font-13{font-size: 26rpx;}
.font-14{font-size: 28rpx;}
.font-15{font-size: 30rpx;}
.font-16{font-size: 32rpx;}
.font-18{font-size: 36rpx;}
.font-20{font-size: 40rpx;}
.font-22{font-size: 44rpx;}
.font-24{font-size: 48rpx;}
.font-26{font-size: 52rpx;}
.font-28{font-size: 56rpx;}
.font-30{font-size: 60rpx;}
.font-32{font-size: 64rpx;}
.font-34{font-size: 68rpx;}
.font-36{font-size: 72rpx;}

.padd-5{padding: 10rpx;}
.padd-10{padding: 20rpx;}
.padd-15{padding: 30rpx;}
.padd-20{padding: 40rpx;}
.padd-30{padding: 60rpx;}

.padd-5_10{padding: 10rpx 20rpx;}
.padd-10_20{padding: 20rpx 40rpx;}

.padd-0_8{padding: 0 16rpx;}
.padd-0_5{padding: 0 10rpx;}
.padd-0_10{padding: 0 20rpx;}
.padd-0_15{padding: 0 30rpx;}
.padd-0_20{padding: 0 40rpx;}
.padd-0_30{padding: 0 60rpx;}
.padd-5_0{padding: 10rpx 0;}
.padd-10_0{padding: 20rpx 0;}
.padd-15_0{padding: 30rpx 0;}
.padd-20_0{padding: 40rpx 0;}
.padd-30_0{padding: 60rpx 0;}

.padd-t-0{padding-top: 0;}
.padd-t-5{padding-top: 10rpx;}
.padd-t-10{padding-top: 20rpx;}
.padd-t-15{padding-top: 30rpx;}
.padd-t-20{padding-top: 40rpx;}
.padd-t-30{padding-top: 60rpx;}
.padd-b-0{padding-bottom: 0;}
.padd-b-5{padding-bottom: 10rpx;}
.padd-b-10{padding-bottom: 20rpx;}
.padd-b-15{padding-bottom: 30rpx;}
.padd-b-20{padding-bottom: 40rpx;}
.padd-b-30{padding-bottom: 60rpx;}
.padd-l-5{padding-left: 10rpx;}
.padd-l-10{padding-left: 20rpx;}
.padd-l-15{padding-left: 30rpx;}
.padd-l-20{padding-left: 40rpx;}
.padd-r-5{padding-right: 10rpx;}
.padd-r-10{padding-right: 20rpx;}
.padd-r-15{padding-right: 30rpx;}
.padd-r-20{padding-right: 40rpx;}

.marg-auto{margin: auto;}
.marg-5{margin: 10rpx;}

.marg-0_5{margin: 0 10rpx;}
.marg-0_10{margin: 0 20rpx;}
.marg-0_15{margin: 0 30rpx;}
.marg-0_20{margin: 0 40rpx;}
.marg-5_0{margin: 10rpx 0;}
.marg-10_0{margin: 20rpx 0;}
.marg-15_0{margin: 30rpx 0;}
.marg-20_0{margin: 40rpx 0;}

.marg-t-5{margin-top: 10rpx;}
.marg-t-10{margin-top: 20rpx;}
.marg-t-15{margin-top: 30rpx;}
.marg-t-20{margin-top: 40rpx;}
.marg-b-5{margin-bottom: 10rpx;}
.marg-b-10{margin-bottom: 20rpx;}
.marg-b-15{margin-bottom: 30rpx;}
.marg-b-20{margin-bottom: 40rpx;}
.marg-l-5{margin-left: 10rpx;}
.marg-l-10{margin-left: 20rpx;}
.marg-l-15{margin-left: 30rpx;}
.marg-r-5{margin-right: 10rpx;}
.marg-r-10{margin-right: 20rpx;}
.marg-r-15{margin-right: 30rpx;}